<template>
   <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="addData" class="formInline" 
            label-width="60px" slot="form" ref="addData" @submit.native.prevent>
                <el-row :gutter="41">
                   <el-col :span="8">
                        <el-form-item label="敏感词">
                            <el-input v-model="sensitiveWord" placeholder="请输入敏感词"></el-input>
                        </el-form-item>
                    </el-col>
                    <div class="btnPosition">
                        <el-button type="primary" @click="search('addData')">查询</el-button>
                    </div>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="deleteRoleLots">批量删除</el-button>
                    <el-button @click="showAdd">添加</el-button>
                    <el-button @click="showLotImport">批量导入</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <el-table-column type="selection" align="center"  width="55"></el-table-column>
                <el-table-column align="center" label="敏感词"  min-width="120">
                     <template  scope="scope">
                        {{scope.row.sSensitiveWord?scope.row.sSensitiveWord:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="替换词" min-width="120">
                      <template  scope="scope">
                        {{scope.row.sReplaceWord?scope.row.sReplaceWord:'**'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="添加时间"  prop="createTime" min-width="130">
                     <template  scope="scope">
                        {{!scope.row.sCreateTime?'--':scope.row.sCreateTime}}
                    </template>
                </el-table-column>
                <el-table-column label="其他操作" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success"
                         @click="correctRow(scope.row)">修改</el-button>
                        <el-button type="text" class="btn-success"
                         @click="deleteListOne(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
         <addAndCorrect :addData="addData" @searchList='searchOrCase'> </addAndCorrect>
         <importLotDialog :addImportData="addImportData" @searchList='search'> </importLotDialog>
         
    </div>
</template>
<script>
import { listSensitiveWords, deteleSensitiveWords} from 'api/system';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import importLotDialog from './importLot';
import addAndCorrect from './addAndCorrect';
export default {
    components: { TableLayout, addAndCorrect, importLotDialog},
    data() {
        return {
            sensitiveWord: '',
            addData: {// 查询 表单数据
                word: '', // 敏感词
                dialogAdd: false,
                popTitle: '',
                status: 1,
                changeWord: '', // 替换词
                pId: ''
            },
            addImportData: {
                dialogLotImport: false
            },
            AnnounceList: [
                {sensitiveCode: '今天', changeCode: '更新', time: '2017-10-22 10:30:22', provice: '江苏省'}
            ],
            multipleSelection: [], // 勾选的表格的项目
            loading: false, // 查询时的加载提示
            listQuery: { // 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        searchOrCase(searchOrCase) {
            if (searchOrCase=='search') {
                this.search();
            } else {
                this.searchFetchData();
            }
        },
        // 获取敏感词列表
        searchFetchData() {
            let sensitiveWord=this.sensitiveWord;
            let curPage = this.listQuery.page;
            let pageSize = this.config.pageSize;
            this.loading = true;
            listSensitiveWords(sensitiveWord, curPage, pageSize).then(res => {
                if (res.data.status==200) {
                    this.AnnounceList=res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                    this.loading = false;
                } else {
                    this.$message.error(res.data.errorMsg);
                }
            });
        },
        // 查询敏感词列表
        search() {
            // console.log('sera');
            this.listQuery.page=1;
            this.searchFetchData();
        },
        // 添加和修改
        showAdd() {
            this.addData.dialogAdd = true;
            this.addData.popTitle='添加敏感词';
            this.addData.status=1
        },
        correctRow(row) {
            this.addData={// 查询 表单数据
                word: row.sSensitiveWord, // 敏感词
                dialogAdd: true,
                popTitle: '修改敏感词',
                status: 2,
                changeWord: row.sReplaceWord, // 替换词
                pId: row.pId
            }
        },
        // 导入
        showLotImport() {
            this.addImportData.dialogLotImport = true;
        },
           // 单个删除敏感词
        deleteListOne(row) {
            this.$confirm('确定删除该敏感词？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                // let pId=row.pId;
                let pIds=[];
                pIds.push(row.pId)
                this.detele(pIds);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 批量删除敏感词  传敏感词id数组
        deleteRoleLots() {
            // let pId = '';
            // for (let i = 0; i < this.multipleSelection.length; i++) {
            //     pId += this.multipleSelection[i].pId + ',';
            // }
            // pId = pId.substring(0, pId.length - 1)
            let pIds = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
                pIds.push(this.multipleSelection[i].pId)
            }
            if (pIds.length == 0) {
                this.$message({
                    type: 'info',
                    message: '请选择需要删除的敏感词!'
                });
                return;
            }
            this.$confirm('此操作将批量删除, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.detele(pIds);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 删除
        detele(pIds) {
            deteleSensitiveWords(pIds).then(res => {
                if (res.data.status==200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.search();
                } else {
                    this.$message.error(res.data.errorMsg);
                }
            });
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss">
@import '../../style/dialog.scss';
.el-message-box{
    .el-message-box__content{
        padding:20px 0px 30px;
        .el-message-box__message {
            p {
                font-size: 18px;
                color: #333;
                text-align: center;
            }
        }
    }
    .el-message-box__btns {
        text-align: center;
        padding-bottom:30px;
    }
}
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
  
}
</style>

